```svelte
<script lang="ts">
  import * as listbox from "@zag-js/listbox"
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import { createUniqueId } from "@zag-js/utils"

  const data = [
    { label: "Nigeria", value: "NG" },
    { label: "United States", value: "US" },
    { label: "Canada", value: "CA" },
    { label: "Japan", value: "JP" },
  ]

  const collection = listbox.collection({ items: data })

  const service = useMachine(listbox.machine, {
    id: createUniqueId(),
    collection,
  })

  const api = $derived(listbox.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <label {...api.getLabelProps()}>Select country</label>
  <ul {...api.getContentProps()}>
    {#each data as item}
      <li {...api.getItemProps({ item })}>
        <span {...api.getItemTextProps({ item })}>{item.label}</span>
        <span {...api.getItemIndicatorProps({ item })}>✓</span>
      </li>
    {/each}
  </ul>
</div>
```
